<template>
    <Head>
        <Title>Cart</Title>
    </Head>
    <PageHeader title="Cart" subtitle="Cart" :image="`${$config.public.baseUrl}images/bg/home1/10.png`"/>
    <div class="cart padding-top padding-bottom">
        <div class="container" data-aos="fade-up">
            <div class="cart__wrapper">
                <div class="row g-5 justify-content-center">
                    <div class="col-xl-8">
                        <div class="cart__top" data-aos="fade-right" data-aos-duration="800" data-aos-delay="100">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Course</th>
                                        <th>Price</th>
                                        <th>Total</th>
                                        <th>Remove</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="course-item">
                                            <div class="c-thumb rounded">
                                                <a href="#"><img src="/images/course/1.png" alt="course"></a>
                                            </div>
                                            <div class="c-content">
                                                <div class="c-reviews">
                                                    <ul>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                    </ul>
                                                    <p>(32 reviews)</p>
                                                </div>
                                                <a href="#">Web design dourse</a>
                                            </div>
                                        </td>
                                        <td class="unit-price">$20 <del class="del">$30</del></td>
                                        <td>$20</td>
                                        <td class="course-delete">
                                            <a href="#"><i class="fa-solid fa-trash-can"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="course-item">
                                            <div class="c-thumb rounded">
                                                <a href="#"><img src="/images/course/2.png" alt="course"></a>
                                            </div>
                                            <div class="c-content">
                                                <div class="c-reviews">
                                                    <ul>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                    </ul>
                                                    <p>(44 reviews)</p>
                                                </div>
                                                <a href="#">Graphic design course</a>
                                            </div>
                                        </td>
                                        <td class="unit-price">$200 <del class="del">$250</del></td>
                                        <td>$200</td>
                                        <td class="course-delete">
                                            <a href="#"><i class="fa-solid fa-trash-can"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="course-item">
                                            <div class="c-thumb rounded">
                                                <a href="#"><img src="/images/course/3.png" alt="course"></a>
                                            </div>
                                            <div class="c-content">
                                                <div class="c-reviews">
                                                    <ul>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                    </ul>
                                                    <p>(33 reviews)</p>
                                                </div>
                                                <a href="#">Marketing course</a>
                                            </div>
                                        </td>
                                        <td class="unit-price">$100 <del class="del">$150</del></td>
                                        <td>$100</td>
                                        <td class="course-delete">
                                            <a href="#"><i class="fa-solid fa-trash-can"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="course-item">
                                            <div class="c-thumb rounded">
                                                <a href="#"><img src="/images/course/4.png" alt="course"></a>
                                            </div>
                                            <div class="c-content">
                                                <div class="c-reviews">
                                                    <ul>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                    </ul>
                                                    <p>(12 reviews)</p>
                                                </div>
                                                <a href="#">SEO course</a>
                                            </div>
                                        </td>
                                        <td class="unit-price">$120 <del class="del">$150</del></td>
                                        <td>$120</td>
                                        <td class="course-delete">
                                            <a href="#"><i class="fa-solid fa-trash-can"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="course-item">
                                            <div class="c-thumb rounded">
                                                <a href="#"><img src="/images/course/5.png" alt="course"></a>
                                            </div>
                                            <div class="c-content">
                                                <div class="c-reviews">
                                                    <ul>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                        <li><i class="fa-solid fa-star"></i></li>
                                                    </ul>
                                                    <p>(20 reviews)</p>
                                                </div>
                                                <a href="#">Software development</a>
                                            </div>
                                        </td>
                                        <td class="unit-price">$200 <del class="del">$220</del></td>
                                        <td>$200</td>
                                        <td class="course-delete">
                                            <a href="#"><i class="fa-solid fa-trash-can"></i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-8 col-md-10">
                        <div class="cart__bottom" data-aos="fade-left" data-aos-duration="800" data-aos-delay="100">
                            <div class="cart__bottom-shipingbox">
                                <div class="cart-overview">
                                    <h4>Cart Totals</h4>
                                    <ul>
                                        <li>
                                            <span class="pull-left">Cart Subtotal</span>
                                            <p class="pull-right">$ 300.00</p>
                                        </li>
                                        <li>
                                            <span class="pull-left">Discount </span>
                                            <p class="pull-right">$ 20.00</p>
                                        </li>
                                        <li>
                                            <span class="pull-left">Order Total</span>
                                            <p class="pull-right">$ 280.00</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="cart__bottom-checkoutbox">
                                <nuxt-link to="/checkout" class="trk-btn trk-btn--border trk-btn--secondary1 d-block mt-4">
                                    Process To Checkout
                                </nuxt-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PageHeader from '@/components/partials/PageHeader.vue'
export default {
    scrollToTop: true,
    components: { PageHeader },
}
</script>

<style></style>